<div id="quotaAuditApp">
    <el-container>
        <el-main>
            <el-card class="mb-3 quota-audit-card">
                <div class="quota-audit-header">
                    <div class="quota-audit-title">门店授信审核</div>
                    <div class="quota-audit-subtitle">审核待激活的门店授信额度申请</div>
                </div>
                <el-tabs v-model="activeTab" @tab-click="handleTabChange" class="quota-tabs">
                    <el-tab-pane label="待审核" name="pending"></el-tab-pane>
                    <el-tab-pane label="已审核" name="audited"></el-tab-pane>
                </el-tabs>
                <el-form :inline="true" :model="searchForm" class="quota-search-form">
                    <el-form-item label="门店名称">
                        <el-input v-model="searchForm.store_name" placeholder="请输入门店名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="门店申请人ID">
                        <el-input v-model="searchForm.applicant_id" placeholder="请输入申请人ID" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-card>

            <el-card>
                <div slot="header" class="quota-table-header">
                    <div>
                        <span><i class="el-icon-document"></i> 授信申请列表</span>
                        <span class="text-muted ml-2">(共 @{{ pagination.total }} 条记录)</span>
                    </div>
                </div>

                <el-table :data="list" v-loading="loading" stripe style="width: 100%">
                    <el-table-column prop="applyAt" label="申请时间" width="160">
                        <template slot-scope="scope">
                            <span>@{{ scope.row.applyAt || '-' }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="申请人" min-width="220">
                        <template slot-scope="scope">
                            <div class="applicant-info">
                                <el-avatar :src="scope.row.applicant && scope.row.applicant.avatar" :size="40" class="mr-2">
                                    @{{ scope.row.applicant && scope.row.applicant.name ? scope.row.applicant.name.charAt(0) : '用' }}
                                </el-avatar>
                                <div class="info-text">
                                    <div class="name">@{{ scope.row.applicant ? scope.row.applicant.name : '未知申请人' }}</div>
                                    <div class="id text-muted">ID: @{{ scope.row.applicant ? scope.row.applicant.id : '-' }}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="门店名称" min-width="220">
                        <template slot-scope="scope">
                            <div class="store-name">@{{ scope.row.storeName || '-' }}</div>
                            <div class="store-id text-muted">门店ID：@{{ scope.row.storeId || '-' }}</div>
                        </template>
                    </el-table-column>

                    <el-table-column label="授信额度" width="140">
                        <template slot-scope="scope">
                            <span class="amount-text">@{{ formatAmount(scope.row.quotaAmount) }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="审核状态" width="150">
                        <template slot-scope="scope">
                            <div class="status-cell">
                                <el-tag :type="scope.row.statusType" size="small">
                                    @{{ scope.row.statusText }}
                                </el-tag>
                                <div v-if="scope.row.auditRejectReason && scope.row.status === 4" class="text-muted status-desc">
                                    @{{ scope.row.auditRejectReason }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="审核时间" width="160">
                        <template slot-scope="scope">
                            <span>@{{ scope.row.auditPassedAt || (activeTab === 'pending' ? '-' : '待审核') }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="180" fixed="right">
                        <template slot-scope="scope">
                            <template v-if="activeTab === 'pending'">
                                <el-button type="text" @click="handleApprove(scope.row)" :loading="approving">审核通过</el-button>
                                <el-divider direction="vertical"></el-divider>
                                <el-button type="text" @click="openRejectDialog(scope.row)">审核不通过</el-button>
                            </template>
                            <template v-else>
                                <span class="text-muted">--</span>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pagination-wrapper mt-3" v-if="pagination.total > 0">
                    <el-pagination
                        @current-change="handlePageChange"
                        :current-page="pagination.page"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                    </el-pagination>
                </div>
            </el-card>
        </el-main>
    </el-container>

    <el-dialog title="审核不通过" :visible.sync="rejectDialogVisible" width="480px" @close="handleRejectDialogClose">
        <el-form :model="rejectForm" label-width="100px">
            <el-form-item label="拒绝原因" required>
                <el-input
                    type="textarea"
                    placeholder="请输入审核不通过原因"
                    v-model="rejectForm.reason"
                    :rows="4">
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="rejectDialogVisible = false">取消</el-button>
            <el-button type="danger" :loading="rejecting" @click="submitReject">确认拒绝</el-button>
        </div>
    </el-dialog>
</div>

<script>
new Vue({
    el: '#quotaAuditApp',
    data() {
        return {
            loading: false,
            approving: false,
            activeTab: 'pending',
            searchForm: {
                store_name: '',
                applicant_id: ''
            },
            list: [],
            pagination: {
                page: 1,
                pageSize: 10,
                total: 0
            },
            rejectDialogVisible: false,
            rejectForm: {
                id: null,
                reason: ''
            },
            rejecting: false
        };
    },
    mounted() {
        this.fetchList();
    },
    methods: {
        async fetchList() {
            this.loading = true;
            try {
                const params = {
                    tab: this.activeTab,
                    page: this.pagination.page,
                    pageSize: this.pagination.pageSize,
                    store_name: this.searchForm.store_name,
                    applicant_id: this.searchForm.applicant_id
                };
                const response = await storeApi.getQuotaAudits(params);
                if (response && response.status === 'success') {
                    this.list = response.data.list || [];
                    if (response.data.pagination) {
                        this.pagination = Object.assign({}, this.pagination, response.data.pagination);
                    }
                }
            } catch (error) {
                console.error('fetch quota audit list error', error);
                this.$message.error('加载授信审核列表失败');
            } finally {
                this.loading = false;
            }
        },
        handleTabChange(tab) {
            this.activeTab = tab.name;
            this.pagination.page = 1;
            this.fetchList();
        },
        handleSearch() {
            this.pagination.page = 1;
            this.fetchList();
        },
        handlePageChange(page) {
            this.pagination.page = page;
            this.fetchList();
        },
        formatAmount(amount) {
            const num = Number(amount || 0);
            return '￥' + num.toFixed(2);
        },
        handleApprove(row) {
            if (!row || !row.id) {
                return;
            }
            this.$confirm('确认通过该门店的授信额度申请吗？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.approving = true;
                try {
                    const response = await storeApi.approveQuotaAudit(row.id);
                    if (response && response.status === 'success') {
                        this.$message.success(response.message || '审核通过成功');
                        this.fetchList();
                    }
                } catch (error) {
                    console.error('approve quota audit error', error);
                } finally {
                    this.approving = false;
                }
            }).catch(() => {});
        },
        openRejectDialog(row) {
            if (!row || !row.id) {
                return;
            }
            this.rejectForm.id = row.id;
            this.rejectForm.reason = '';
            this.rejectDialogVisible = true;
        },
        handleRejectDialogClose() {
            this.rejectForm.id = null;
            this.rejectForm.reason = '';
            this.rejecting = false;
        },
        async submitReject() {
            if (!this.rejectForm.id) {
                return;
            }
            if (!this.rejectForm.reason.trim()) {
                this.$message.error('请输入拒绝原因');
                return;
            }
            this.rejecting = true;
            try {
                const response = await storeApi.rejectQuotaAudit(this.rejectForm.id, {
                    reason: this.rejectForm.reason
                });
                if (response && response.status === 'success') {
                    this.$message.success(response.message || '审核拒绝成功');
                    this.rejectDialogVisible = false;
                    this.fetchList();
                }
            } catch (error) {
                console.error('reject quota audit error', error);
            } finally {
                this.rejecting = false;
            }
        }
    }
});
</script>

<style>
#quotaAuditApp .quota-audit-card {
    margin-bottom: 20px;
}

.quota-audit-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.quota-audit-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
}

.quota-audit-subtitle {
    font-size: 13px;
    color: #909399;
    margin-top: 4px;
}

.quota-tabs {
    margin-bottom: 12px;
}

.quota-search-form .el-form-item {
    margin-right: 20px;
    margin-bottom: 0;
}

.quota-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.applicant-info {
    display: flex;
    align-items: center;
}

.applicant-info .info-text {
    margin-left: 8px;
}

.applicant-info .name {
    font-weight: 500;
    color: #303133;
}

.applicant-info .id {
    font-size: 12px;
}

.store-name {
    font-weight: 500;
    color: #303133;
}

.store-id {
    font-size: 12px;
    margin-top: 2px;
}

.amount-text {
    font-weight: 600;
    color: #303133;
}

.status-cell .status-desc {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
}

.pagination-wrapper {
    display: flex;
    justify-content: center;
    padding-top: 16px;
}

.text-muted {
    color: #909399;
}

.ml-2 {
    margin-left: 8px;
}

.mr-2 {
    margin-right: 8px;
}

.mt-3 {
    margin-top: 16px;
}
</style>

